import { ExtractPropTypes } from "vue"
import { TuniaoSize, TuniaoSizes, TuniaoType, TuniaoTypes } from '../../types/tuniao-ui'
import { validatorColorValue, validatorSizeValue } from '../../utils'

/**
 * Props参数
 */
export const badgeProps = {
  /** 背景颜色, 支持内置颜色的值、十六进制、rgb()、rgba()的值 */
  bgColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('bg', value)
    }
  },
  /** 字体颜色, 支持内置颜色的值、十六进制、rgb()、rgba()的值 */
  color: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('color', value)
    }
  },
  /** 颜色类型，如果自定义了颜色则使用颜色的值 */
  type: {
    type: String,
    default: '',
    validator: (value: TuniaoType | '') => {
      return value === '' || TuniaoTypes.includes(value)
    }
  },
  /** 尺寸大小，如果是为文字内容，则设置宽度否则同时设置宽高(内置sm、lg、xl), 默认单位为rpx */
  size: {
    type: [String, Number],
    default: '',
    validator: (value: string | number) => {
      return validatorSizeValue(value) || TuniaoSizes.includes(value as TuniaoSize)
    }
  },
  /** 字体大小, 默认单位为rpx */
  fontSize: {
    type: [String, Number],
    default: '',
    validator: (value: string | number) => {
      return validatorSizeValue(value)
    }
  },
  /** 加粗字体 */
  fontBold: {
    type: Boolean,
    default: false
  },
  /** 自定义样式 */
  customStyle: {
    type: Object,
    default: () => {
      return {}
    }
  },
  /** 显示点角标 */
  dot: {
    type: Boolean,
    default: false
  },
  /** 绝对定位角标, 使用该参数的时候父组件要设置为position: relative; */
  absolute: {
    type: Boolean,
    default: false
  },
  /** 绝对定位相对偏移, 当absolute为true时生效 */
  absolutePosition: {
    type: Object,
    default: (): { top: string, right: string} => {
      return {
        top: '0rpx',
        right: '0rpx'
      }
    }
  },
  /** 绝对定位后元素居中对齐, 当absolute为true时生效 */
  absoluteCenter: {
    type: Boolean,
    default: false
  },
  /** 点击标识 */
  index: {
    type: [String, Number],
    default: ''
  }
}
export type BadgeProps = ExtractPropTypes<typeof badgeProps>

export const badgeEmits = {
  /** 点击事件 */
  click: (index: string | number) => typeof index === 'string' || typeof index === 'number'
}
export type BadgeEmits = typeof badgeEmits
